<template>
  <div class="FooterMusic">
    <div class="footerLeft" @click="gequxiangqinye">
      <img :src="playList[playListID].al.picUrl" alt="" />
      <div>
        <p>{{ playList[playListID].name }}</p>
        <span>横滑切换上下首哦</span>
      </div>
    </div>
    <div class="footerRight">
      <svg
        class="icon liebiao"
        aria-hidden="true"
        @click="dijibofang"
        v-if="isbofang"
      >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon liebiao" aria-hidden="true" @click="dijibofang" v-else>
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon liebiao" aria-hidden="true">
        <use xlink:href="#icon-xuanxiang_2"></use>
      </svg>
    </div>
    <van-popup
      v-model:show="xianshi"
      position="left"
      :style="{ height: '100%', width: '100%' }"
    >
      <XiangQinYe :dijibofang="dijibofang" />
    </van-popup>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListID].id}.mp3`"
    ></audio>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { Popup } from "vant";
import XiangQinYe from "@/components/XiangQin/GeQuYe.vue";
 let refs;
export default {
  data() {
    return {
      dingshiqi: 0,
    };
  },

  mounted() {
    // 第一次渲染开始加载歌词
    this.$store.dispatch("gequgechi", this.playList[this.playListID].id);
    this.Time(); //页面初始渲染开启定时器
  },
  updated() {
    this.$store.dispatch("gequgechi", this.playList[this.playListID].id);
    this.zhongshijian(this.$refs.audio.duration);
  },
  computed: {
    // 歌曲数组详情 点击歌词索引值 音乐是否播放 歌词
    ...mapState(["playList", "playListID", "isbofang", "xianshi", "gechiArr"]),
  },
  methods: {
    dijibofang() {
     refs = this.$refs.audio;
      this.bofang(refs); //调用函数播放音乐
      if (this.isbofang) {
        this.anniu(false); //按钮是否隐藏
        this.Time(); //调用定时器刷新当前播放的时间
      } else {
        this.anniu(true);
        clearInterval(this.dingshiqi); //暂停清除定时器
      }
    },
    //刷新音乐的当前播放的时间
    Time() {
      // 定时器开始启动
      this.dingshiqi = setInterval(() => {
        this.audiotTime(this.$refs.audio.currentTime);
      }, 1000);
    },

    ...mapMutations([
      //按钮
      "anniu",
      //时间
      "audiotTime",
      // 详情是否显示
      "gequxiangqinye",
      //底部是否显示
      "dibuxianshi",
      //歌曲是否播放
      "bofang",
      // 歌曲总时间
      "zhongshijian",
    ]),
  },

  watch: {
    playListID: function () {
      //监听如果下标发生了改变,
      refs = this.$refs.audio;
      this.bofang(refs);
      //   //如果是暂停状态，改变图标
      this.anniu(false);
      // }
    },
    playList: function () {
      if (this.isbofang) {
        this.$refs.audio.autoplay = true;
        this.anniu(false);
      }
    },
  },
  components: {
    XiangQinYe,
    Popup,
  },
};
</script>
<style lang="less" scoped>
.FooterMusic {
  width: 100%;
  height: 1.4rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #999;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  .footerLeft {
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }
  .footerRight {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}
</style>